<!-- 收货方地址是否精确 -->
<template>
  <div class="location-box">
    <span :class="isDiscolour">{{ locationTypeName }}</span>
    <el-button type="text"
               @click="handleVisible">
      <!-- <dn-icon-svg class-name="iconClass"
                   icon-name="dangqianweizhi" /> -->
      <img :src="location"
           class="location-img"
           alt="">
    </el-button>
    <MapModule v-model="visible"
               :preset="value" />
  </div>
</template>

<script>
import MapModule from './MapModule.vue';
import location from '@/static/images/location.png'
const TYPE_NO = 0;
const TYPE_YES = 1;

export default {
  name: 'AddressAccuracy',
  components: { MapModule },
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      visible: false,
      location
    }
  },
  computed: {
    addressId () {
      return this.value.addressId
    },
    locationTypeName () {
      return this.value.type === TYPE_NO ? `否` : `是`
    },
    isDiscolour () {
      return this.value.type === TYPE_NO ? `discolour` : ``
    }
  },
  created () {
  },
  methods: {
    handleVisible () {
      this.visible = true
    },
  }
}
</script>

<style lang="scss" scoped>
.location-box {
  display: flex;
  align-items: center;
  // justify-content: space-evenly;
  // font-weight: 500;
}
// .iconClass {
//   fill: #eb662b !important;
//   width: 20px;
//   height: 20px;
//   padding-left: 10px;
// }
.discolour {
  color: #eb662b;
}
.location-img {
  height: 25px;
  padding-left: 10px;
}
</style>